<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Search Type (example 2)</title>

	<!-- jQuery -->
	<script src="js/jquery-latest.min.js"></script>

	<!-- Demo stuff -->
	<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
	<script src="js/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="css/jq.css">
	<link href="css/prettify.css" rel="stylesheet">
	<script src="js/prettify.js"></script>
	<script src="js/docs.js"></script>
	<style>
	/* override the vertical-align top in the blue theme */
	.notes.tablesorter-blue tbody td { vertical-align: middle; }
	</style>

	<!-- Tablesorter: required -->
	<link rel="stylesheet" href="../css/theme.blue.css">
	<script src="../js/jquery.tablesorter.js"></script>
	<script src="../js/jquery.tablesorter.widgets.js"></script>
	<script src="../js/widgets/widget-filter-type-insideRange.js"></script>
	<script src="../js/parsers/parser-date-range.js"></script>

	<script id="js">$(function() {

	// call the tablesorter plugin
	$("#table").tablesorter({
		theme: 'blue',
		widthFixed : true,
		widgets: ["zebra", "filter"],
		widgetOptions : {
			filter_reset : '.reset',
			// set to false because it is difficult to determine if a filtered
			// row is already showing when looking at ranges
			filter_searchFiltered : false
		}
	});

});</script>

<script>
$(function(){
	$('button').on('click', function(){
		var $this = $(this),
			filters = [],
			col = $(this).data('column'),
			query = $(this).text();
		filters[col] = query;
		$('table').trigger('search', [ filters ]);
	});
});

</script>

</head>
<body>
<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>Custom Filter Widget Search Type (example 2)</h2>
	<h3>Flexible client-side table sorting</h3>
	<a href="index.html">Back to documentation</a>
</div>
<div id="main">

	<p class="tip">
		<em>NOTE!</em>
		<ul>
			<li>In <span class="version updated">v2.21.0</span>
				<ul>
					<li>The "insideRange" function was updated to use the column parser and moved into a separate file "widget-filter-type-insideRange.js"</li>
					<li>This change would allow the sorting of dates, if using it along with one of the <a href="example-parsers-date-range.html">date-range parsers</a> (added v2.21.0).</li>
				</ul>
			</li>
			<li>This is another example of how to add a custom filter search type - see <a href="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">this page</a> for details on how to add your own.</li>
			<li>This "insideRange" search type does the following:
				<ul>
					<li>This search type was not included with the other <a href="example-widget-filter-custom-search.html#builtin_filters">built-in search types</a> as it might be a little slower than the other search types because it has a bit more calculation to do than the others.</li>
					<li>It looks for a dash surrounded by spaces (<code> - </code>) within the filter before activating.</li>
					<li>So if you look for just <button type="button" data-column="2">4</button> in the "Delivery" column, the exact match of 4 will still be included.</li>
					<li>Test out some more examples:
						<ul>
							<li>Try <button type="button" data-column="2">7</button> or <button type="button" data-column="2">8</button> in the Delivery column</li>
							<li><button type="button" data-column="3">$15.45</button> in the "Price Range" column.</li>
							<li><button type="button" data-column="4">7/12/2014</button> in the "Date Range" column; this column is processed using the "date-range-mdy" parser (added <span class="version">v2.21.0</span>).</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>Entering a range (e.g. <button type="button" data-column="2">4 - 7</button> will switch the query to the <a href="example-widget-filter-custom-search.html#builtin_filters">range search type</a> which will <em>only look at the first number</em> of the range within each cell.</li>
		</ul>
	</p>

	<h1>Demo</h1>
Filters: <button type="button">Reset</button>
<table id="table" class="tablesorter">
	<thead>
		<tr>
			<th>Rank</th>
			<th>Name</th>
			<th>Delivery (days)</th>
			<th>Price Range</th>
			<th class="sorter-date-range-mdy">Date Range</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>Widget</td><td>2 - 10</td><td>$5.95 - $13.20</td><td>04/28/2014 - 07/13/2014</td></tr>
		<tr><td>11</td><td>Doodad</td><td>1 - 4</td><td>$2.99 - $8.40</td><td>04/28/2014 - 05/13/2014</td></tr>
		<tr><td>12</td><td>Whatchamacallit</td><td>3 - 7</td><td>$4.29 - $15.99</td><td>7/15/2014</td></tr>
		<tr><td>15</td><td>Thingy</td><td>5 - 6</td><td>$9.99 - $13.20</td><td>07/12/2014 - 07/23/2014</td></tr>
		<tr><td>21</td><td>Cube</td><td>2 - 7</td><td>$6.99 - $14.99</td><td>05/22/2014 - 05/23/2014</td></tr>
		<tr><td>13</td><td>It</td><td>5 - 12</td><td>$15.89 - $18.22</td><td>8/12/2014 - 7/10/2014</td></tr>

		<tr><td>5</td><td>Fred</td><td>20 - 30</td><td>$13.19 - $15.54</td><td>6/12/2014 - 6/14/2014</td></tr>
		<tr><td>10</td><td>FuBar</td><td>4</td><td>$5.50</td><td>6/13/2014 - 6/22/2014</td></tr>
		<tr><td>16</td><td>Otto</td><td>2 - 4</td><td>$6.30 - $14.19</td><td>5/10/2014 - 5/20/2014</td></tr>
		<tr><td>21</td><td>Betsy</td><td>7</td><td>$5.67 - $8.25</td><td>6/2/2014 - 6/13/2014</td></tr>
		<tr><td>18</td><td>Clyde</td><td>5 - 10</td><td>$11.20 - $15.45</td><td>6/13/2014</td></tr>
		<tr><td>7</td><td>Brick</td><td>5 - 7</td><td>$12.00 - $14.30</td><td>7/2/2014 - 7/25/2014</td></tr>
		<tr><td>9</td><td>Gadget</td><td>10 - 20</td><td>$7.09 - $13.20</td><td>5/23/2014 - 6/12/2014</td></tr>
	</tbody>
</table>

	<h1>Page Head</h1>
	<div id="html">
		<pre class="prettyprint lang-html">&lt;!-- jQuery --&gt;
&lt;script src=&quot;js/jquery-latest.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- tablesorter --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.blue.css&quot;&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;
&lt;!-- inside range filter type --&gt;
&lt;script src=&quot;../js/widgets/widget-filter-type-insideRange.js&quot;&gt;&lt;/script&gt;
&lt;!-- parse date ranges --&gt;
&lt;script src=&quot;../js/parsers/parser-date-range.js&quot;&gt;&lt;/script&gt;</pre>
	</div>


	<h1>Javascript</h1>
	<div id="javascript">
		<pre class="prettyprint lang-javascript"></pre>
	</div>

<div class="next-up">
	<hr />
	Next up: <a href="example-widget-filter-formatter-1.html">jQuery custom filter widget formatter (jQuery UI widgets) &rsaquo;&rsaquo;</a>
</div>

</div>

</body>
</html>
